<template>
  <div class="OpportunitiesDetail">
    <!-- 锚点定位 -->
    <div class="anchor">
      <div class="anchor-item" @click="handleClickAnchor('opportunities-info')">
        商机基本信息
      </div>
      <div class="anchor-item" @click="handleClickAnchor('bid-info')">
        商机投标信息
      </div>
      <div class="anchor-item" @click="handleClickAnchor('group-title')">
        商机小组
      </div>
      <div class="anchor-item" @click="handleClickAnchor('task-title')">
        商机任务
      </div>
      <div class="anchor-item" @click="handleClickAnchor('approval-title')">
        商机审批
      </div>
      <div class="anchor-item" @click="handleClickAnchor('dynamic-title')">
        商机动态
      </div>
      <div
        class="anchor-item"
        v-if="detailData.clueId"
        @click="handleClickAnchor('clue-info')"
      >
        关联线索信息
      </div>
    </div>
    <div class="clueDetail">
      <router-header title="商机详情"></router-header>
      <div style="margin-right:120px;">
        <div class="form-single-fragment" style="position: relative">
          <el-form :model="detailData" size="mini" label-position="right">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="名称：">{{
                  detailData.oppoName
                }}</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="创建日期：">{{
                  detailData.createTime
                }}</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="商机录入部门：">{{
                  detailData.deptName
                }}</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="商机录入人：">{{
                  detailData.createUserName
                }}</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="">
                  <el-tag>{{ detailData.oppoStatusName }}</el-tag>
                </el-form-item>
              </el-col>
              <el-col :span="24" class="line"></el-col>
            </el-row>
            <!-- 商机基本信息 -->
            <div ref="opportunities-info">
              <el-row :gutter="20">
                <el-col :span="24" class="clue-title" style="display: block">
                  商机基本信息
                  <span style="font-size: 14px; color: #aaaaaa; margin-left: 10px"
                    >商机编号 {{ detailData.oppoCode }}</span
                  ></el-col
                >
                <el-col :span="12">
                  <el-form-item label="企业名称：">{{
                    detailData.custName
                  }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="企业联系人：">
                    <span>{{ detailData.contacts }}</span>
                    <span style="margin-left: 10px">{{
                      detailData.telephone
                    }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="业务类型：">{{
                    detailData.businessTypeName
                  }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="企业属性：">{{
                    detailData.contactProperty
                  }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="商机所属阶段：">{{
                    detailData.stageName
                  }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="商机地区：">{{
                    detailData.oppoDistrictName
                  }}</el-form-item>
                </el-col>
              <el-col :span="12">
                  <el-form-item label="详细地址：">{{
                    detailData.detailedAddress
                  }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="预计合同金额：">
                    {{detailData.contractAmount ? detailData.contractAmount : 0 }} {{detailData.units}}
                    <!-- {{detailData.contractAmount }} {{detailData.units}} -->
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="预计成交时间：">{{
                    detailData.tradingDate
                  }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="商机来源：">{{
                    detailData.oppoSource
                  }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="项目概况：">{{
                    detailData.businessProfile
                  }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="采购方式：">{{
                    detailData.procurement
                  }}</el-form-item>
                </el-col>
                <el-col :span="24" class="line"></el-col>
              </el-row>
            </div>
            <!-- 商机投标信息 -->
            <div ref="bid-info">
              <el-row :gutter="20">
                <el-col :span="24" class="clue-title">
                  商机投标信息
                  <el-button
                    type="success"
                    v-if="!bidData.show && detailData.showBid == 1"
                    @click="bidDialog = true"
                  >
                    添加
                  </el-button>
                  <!-- <el-button type="primary" size="mini">编辑</el-button> -->
                </el-col>
                <div v-if="bidData.show">
                  <el-col :span="12">
                    <el-form-item label="投标方式：">{{
                      bidData.bidTypeName
                    }}</el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="投标时间：">{{
                      bidData.bidTime
                    }}</el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="附   件" style="margin: 0">
                       <!-- :id="oppoId" -->
                      <Upload v-model="bidData.accessoryList" fielState="3" :id="bidData.bidId" readonly></Upload>
                      <!-- <div class="enclosure">
                        <el-tooltip
                          effect="dark"
                          :content="item.name"
                          placement="top"
                          v-for="item in bidData.accessoryLists"
                          :key="item.uid"
                        >
                          <div class="enclosure-item">
                            <img
                              src="@/assets/img/word.webp"
                              v-if="item.name.indexOf('.doc') > -1"
                              alt=""
                              @click="handleClickEnclosure(item.response.data)"
                            />
                            <img
                              src="@/assets/img/excel.webp"
                              v-else-if="item.name.indexOf('.xls') > -1"
                              alt=""
                              @click="handleClickEnclosure(item.response.data)"
                            />
                            <img
                              src="@/assets/img/pdf.webp"
                              v-else-if="item.name.indexOf('.pdf') > -1"
                              alt=""
                              @click="handleClickEnclosure(item.response.data)"
                            />
                            <el-image
                              v-else
                              style="
                                width: 50px;
                                height: 50px;
                                margin: 0 auto;
                                display: block;
                              "
                              :src="item.response.data"
                              fit="cover"
                              :preview-src-list="[item.response.data]"
                            ></el-image>
                            <div class="enclosure-name">{{ item.name }}</div>
                          </div>
                        </el-tooltip>
                      </div> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="注意事项：">{{
                      bidData.notes
                    }}</el-form-item>
                  </el-col>
                </div>
              </el-row>
            </div>
          </el-form>
        </div>
        <!-- 商机小组 -->
        <div class="line"></div>
        <div class="clue-title" ref="group-title">
          商机小组
          <el-button
            type="success"
            v-if="detailData.showTeam == 1"
            @click="handleClickAddGroup"
            >添加</el-button
          >
        </div>
        <el-table
          :data="groupData"
          size="mini"
          style="width: 100%"
          header-cell-class-name="table-header-gray"
          v-loading="isShowloading"
        >
          <el-table-column
            type="index"
            align="center"
            width="55"
            label="序号"
          ></el-table-column>
          <el-table-column label="昵称" prop="name"> </el-table-column>
          <el-table-column label="岗位" prop="jobs"></el-table-column>
          <el-table-column label="项目角色" prop="projectRoles">
          </el-table-column>
          <el-table-column label="联系方式" prop="contact"> </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="80"
            v-if="detailData.showTeam == 1"
          >
            <template slot-scope="{ row }">
              <el-button type="danger" v-if=" detailData.createUser != row.userId" @click="handleDeleteGroup(row)" size="mini"
                  >删除</el-button
                >
              <el-tooltip v-else effect="dark" :disabled="false" content="不能删除商机负责人" placement="top-start">
                <div class="del-disabled">删除</div>
                <!-- <el-button type="danger" @click="handleDeleteGroup(row)" size="mini"
                  >删除</el-button
                > -->
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!-- 商机任务 -->
        <div class="line"></div>
        <div class="clue-title" ref="task-title">
          商机任务<el-button
            type="success"
            @click="handleClickAddBtn"
            v-if="detailData.showTask == 1"
            >添加</el-button
          >
        </div>
        <el-table
          :data="taskList"
          size="mini"
          style="width: 100%"
          header-cell-class-name="table-header-gray"
          v-loading="isShowloading"
        >
          <el-table-column
            type="index"
            align="center"
            width="55"
            label="序号"
          ></el-table-column>
          <el-table-column
            prop="oppoName"
            align="center"
            width="150"
            label="任务状态"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              {{ row.taskStatus | statusFilter }}
            </template>
          </el-table-column>
          <el-table-column
            prop="taskName"
            align="center"
            width="150"
            label="任务名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="taskDesc"
            align="center"
            label="任务说明"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="beganDate"
            align="center"
            label="计划开始日期"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="endDate"
            align="center"
            label="计划结束日期"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="customerName"
            align="center"
            label="创建人及日期"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              {{ row.createUserName }},{{ row.createTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="220">
            <template slot-scope="{ row }">
              <el-button
                type="text"
                v-if="row.task === 1"
                @click="handleClickTaskItem(row, 'deliver')"
                >成果交付</el-button
              >
              <el-button
                v-if="row.taskStatus === 3"
                type="text"
                @click="handleClickTaskResult(row)"
                >任务成果</el-button
              >
              <el-button type="text" @click="handleClickTaskItem(row, 'detail')"
                >查看详情</el-button
              >
              <el-button
                type="text"
                v-if="row.showTaskApproval === 1"
                @click="handleClickApprovalTaskItem(row, 2)"
                >审批</el-button
              >
              <el-button
                type="text"
                v-if="row.showAgain === 1"
                @click="handleClickAgainTask(row)"
                >重新发起</el-button
              >
              <el-button
                type="danger"
                size="mini"
                v-if="row.showDel === 1"
                @click="handleClickDelBusinessMission(row)"
                >删除</el-button
              >
              <el-button
                type="text"
                v-if="row.taskStatus !== 1 && row.isAudit === 1"
                @click="handleClickViewTaskOpinion(row)"
                >查看意见</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 商机审批 -->
        <div class="line"></div>
        <div class="clue-title" ref="approval-title">
          商机审批<el-button
            type="success"
            v-if="detailData.showApproval == 1"
            @click="addOpportunitiesApproval"
            >添加</el-button
          >
        </div>
        <el-table
          :data="approvalList"
          size="mini"
          style="width: 100%"
          header-cell-class-name="table-header-gray"
          v-loading="isShowloading"
        >
          <el-table-column
            type="index"
            align="center"
            width="55"
            label="序号"
          ></el-table-column>
          <el-table-column
            prop="examinationApprovalType"
            align="center"
            label="审批类型"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              {{ row.examinationApprovalType | approvalTypeFilter }}
            </template>
          </el-table-column>
          <el-table-column
            prop="examinationApprovalOpinionsName"
            align="center"
            label="审批状态"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="审批意见" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="handleClickViewApprovalOpinion(row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="submissionDate"
            align="center"
            label="提交日期"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="customerName"
            align="center"
            label="创建人"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              {{ row.founderName }},{{ row.founderDepartment }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="220">
            <template slot-scope="{ row }">
              <!-- <el-button type="text" @click="onStartWithBusinessKeyTestflowable2Click(row)"
                >发起流程</el-button
              > -->
              <el-button type="text" @click="handleClickDetail(row)">
                查看详情
              </el-button>
              <el-button
                type="text"
                v-if="row.showApproval === 1"
                @click="handleClickApprovalDetail(row)"
              >
                审批
              </el-button>
              <el-button
                type="text"
                v-if="row.showDel === 1"
                @click="handleClickDelApprovalDetail(row)"
              >
                删除
              </el-button>
              <el-button
                type="text"
                v-if="row.showAgain === 1"
                @click="againAddOpportunitiesApproval(row)"
              >
                重新发起
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 商机动态 -->
        <div class="line"></div>
        <div class="clue-title" ref="dynamic-title">商机动态</div>
        <div class="dynamic" v-loading="loading">
          <div
            class="dynamic-item"
            v-for="(item, index) in dynamicList"
            :key="index"
          >
            <div style="flex-shrink: 0">
              <img class="avatar" src="@/assets/img/default-header.png" alt="" />
              <div class="name">
                {{ item.userName }}，{{ item.userDepartment }}
              </div>
            </div>
            <div style="margin-left: 20px">
              <div class="dynamic-content">
                {{ item.dynamicContent }}
              </div>
              <div class="dynamic-time">
                发布于{{ item.releaseTime }}
                <el-button
                  type="text"
                  v-if="item.deletedType === 1"
                  style="margin-left: 15px"
                  @click="handleClickDelete(item.id)"
                  >删除</el-button
                >
              </div>
            </div>
          </div>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.current"
            :page-size="queryParams.size"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, prev, pager, next, sizes"
            :total="dynamicTotal"
            v-if="dynamicTotal > 0"
          ></el-pagination>
          <div class="dynamic-release">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="dynamicValue"
              maxlength="150"
              :rows="5"
              show-word-limit
            >
            </el-input>
            <div class="release-btn">
              <el-button
                type="primary"
                v-if="detailData.showDynamic == 1"
                :disabled="!dynamicValue.trim()"
                @click="handleClickRelease"
                >发布动态</el-button
              >
            </div>
          </div>
        </div>
        <!-- 线索动态 -->
        <div v-if="detailData.clueId" ref="clue-info" style="padding-top: 20px">
          <div class="clue-title">关联线索信息</div>
          <el-form
            :model="clueDetail"
            size="mini"
            class="clue-form"
            label-position="right"
          >
            <el-row :gutter="20">
              <el-col :span="24" class="clue-title">{{
                clueDetail.clueName
              }}</el-col>
              <el-col :span="6">
                <el-form-item label="创建日期：">{{
                  clueDetail.createTime
                }}</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="线索录入部门：">{{
                  clueDetail.deptName
                }}</el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="线索录入人：">{{
                  clueDetail.createUserName
                }}</el-form-item>
              </el-col>
              <el-col :span="24" class="line"></el-col>
              <el-col :span="24" class="clue-title">线索基本信息</el-col>
              <el-col :span="12">
                <el-form-item label="企业名称：">{{
                  clueDetail.customerName
                }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业联系人：">
                  <span>{{ clueDetail.contacts }}</span>
                  <span style="margin-left: 10px">{{
                    clueDetail.telephone
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="业务类型：">{{
                  clueDetail.businessTypeName
                }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所在地区：">{{
                  clueDetail.parentName.join(" ")
                }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="线索来源：">{{
                  clueDetail.clueSource
                }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业属性：">{{
                  clueDetail.productIntention
                }}</el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="线索概况：">{{
                  clueDetail.clueContent
                }}</el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="clue-title" style="font-size: 16px">线索动态</div>
          <div class="dynamic" v-loading="loading">
            <div
              class="dynamic-item"
              v-for="(item, index) in clueDynamicList"
              :key="index"
            >
              <div style="flex-shrink: 0">
                <img
                  class="avatar"
                  src="@/assets/img/default-header.png"
                  alt=""
                />
                <div class="name">{{ item.userName }}，{{ item.deptNmae }}</div>
              </div>
              <div style="margin-left: 20px">
                <div class="dynamic-content">
                  {{ item.dynamicsContent }}
                </div>
                <div class="dynamic-time">发布于{{ item.createTime }}</div>
              </div>
            </div>
            <el-pagination
              background
              @size-change="handleSizeChangeClue"
              @current-change="handleCurrentChangeClue"
              :current-page="cluequeryParams.current"
              :page-size="cluequeryParams.size"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, prev, pager, next, sizes"
              :total="clueDynamicTotal"
              v-if="clueDynamicTotal > 0"
            ></el-pagination>
          </div>
        </div>
      </div>
      <!-- 投标信息 -->
      <el-dialog
        title=""
        :visible.sync="bidDialog"
        width="800px"
        @closed="handleCloseBid"
      >
        <el-form :model="detailData" size="mini" label-position="right">
          <el-row :gutter="20">
            <el-col :span="24" class="clue-title" style="display: block">
              商机基本信息
              <span style="font-size: 14px; color: #aaaaaa; margin-left: 10px"
                >商机编号 {{ detailData.oppoCode }}</span
              ></el-col
            >
            <el-col :span="12">
              <el-form-item label="企业名称：">{{
                detailData.custName
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业联系人：">
                <span>{{ detailData.contacts }}</span>
                <span style="margin-left: 10px">{{
                  detailData.telephone
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业务类型：">{{
                detailData.businessTypeName
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所在地区：">{{
                detailData.oppoDistrictName
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预计合同金额：">
                <!-- {{detailData.contractAmount}} {{detailData.units}} -->
                {{detailData.contractAmount ? detailData.contractAmount : 0}} {{detailData.units}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预计成交日期：">{{
                detailData.tradingDate
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商机来源：">{{
                detailData.oppoSource
              }}</el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="项目概况：">{{
                detailData.businessProfile
              }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form
          :model="bidData"
          size="mini"
          ref="bidForm"
          :rules="allRules"
          label-position="right"
        >
          <el-row :gutter="20">
            <el-col :span="24" class="clue-title">投标信息</el-col>
            <el-col :span="12">
              <el-form-item label="招标方式：" prop="bidType">
                <el-radio-group v-model="bidData.bidType">
                  <el-radio label="1">公开招标</el-radio>
                  <el-radio label="2">邀标</el-radio>
                  <el-radio label="3">议标</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="投标时间：">
                <el-date-picker
                  v-model="bidData.bidTime"
                  type="date"
                  align="right"
                  unlink-panels
                  placeholder="请选择"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="附件：">
                <!-- <Upload v-model="bidData.accessoryList"></Upload> -->
                <Upload v-model="bidData.accessoryList" :limit="10" :id="oppoId" fielState="3"></Upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="注意事项：">
                <el-input
                  type="textarea"
                  show-word-limit
                  :maxlength="150"
                  rows="4"
                  class="input-item"
                  v-model="bidData.notes"
                  placeholder="输入投标注意事项，支持150个字符"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="bidDialog = false">取 消</el-button>
          <el-button type="primary" @click="handleClickAddBid">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 商机小组 -->
      <el-dialog
        title="添加小组成员"
        :visible.sync="groupDialog"
        class="group-dialog"
      >
        <el-form
          label-width="75px"
          size="mini"
          label-position="right"
          @submit.native.prevent
        >
          <filter-box :item-width="350">
            <el-form-item label="员工姓名">
              <el-input
                class="filter-item"
                v-model="groupParams.showName"
                :clearable="true"
                placeholder="员工姓名"
              />
            </el-form-item>
            <el-button
              slot="operator"
              type="primary"
              :plain="true"
              size="mini"
              @click="getUserList(true)"
              >查询</el-button
            >
          </filter-box>
        </el-form>
        <el-table
          :data="groupList"
          size="mini"
          header-cell-class-name="table-header-gray"
          style="width: 100%"
        >
          <!-- <el-table-column label="用户名" prop="loginName"> </el-table-column> -->
          <el-table-column label="员工姓名" prop="showName"> </el-table-column>
          <!-- <el-table-column label="账号类型" prop="userTypeDictMap.name" /> -->
          <el-table-column label="状态">
            <template slot-scope="scope">
              <el-tag
                :type="getUserStatusType(scope.row.userStatus)"
                size="mini"
                >{{ SysUserStatus.getValue(scope.row.userStatus) }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="商机角色" prop="projectRoles">
            <template slot-scope="{ row }">
              <el-select v-model="row.projectRoles" placeholder="请选择">
                <el-option label="协作人" value="协作人"></el-option>
                <el-option
                  label="关键因素推动人"
                  value="关键因素推动人"
                ></el-option>
                <el-option label="外资企业" value="外资企业"></el-option>
                <el-option label="合资企业" value="合资企业"></el-option>
                <el-option label="私营企业" value="私营企业"></el-option>
                <el-option label="事业单位" value="事业单位"></el-option>
                <el-option
                  label="国家行政机关"
                  value="国家行政机关"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="80">
            <template slot-scope="{ row }">
              <el-button
                type="primary"
                @click="handleChooseGroup(row)"
                size="mini"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end" style="margin-top: 10px">
          <el-pagination
            background
            @size-change="handleSizeChangeGroup"
            @current-change="handleCurrentChangeGroup"
            :current-page="groupParams.pageNo"
            :page-size="groupParams.page_size"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, prev, pager, next, sizes"
            :total="groupTotal"
          ></el-pagination>
        </el-row>
      </el-dialog>
      <!-- 商机任务 -->
      <el-dialog
        title=""
        :visible.sync="taskDialog"
        width="800px"
        v-if="taskDialog"
        @close="
          ApprovalTaskItem = '';
          taskData = {};
          AgaintaskData = {};
          taskDetail = {};
          taskDetail.taskinput = '';
          deliverData = {};
        "
      >
        <el-dialog
          :visible.sync="approverDialog"
          append-to-body
          width="700px"
          class="group-dialog"
        >
          <div class="approver-select">添加审批人</div>
          <div class="approver-inquiry">
            <el-form
              label-width="75px"
              size="mini"
              label-position="right"
              @submit.native.prevent
              class="login-name"
            >
              <el-form-item label="登录名称">
                <el-input
                  class="filter-item"
                  v-model="groupParams.loginName"
                  :clearable="true"
                  placeholder="登录名称"
                />
              </el-form-item>
            </el-form>
            <el-button
              class="aaa"
              slot="operator"
              type="primary"
              :plain="true"
              size="mini"
              @click="getUserList(true)"
              >查询</el-button
            >
          </div>
          <div>
            <el-table
              :data="groupList"
              size="mini"
              header-cell-class-name="table-header-gray"
              style="width: 100%"
            >
              <el-table-column label="用户名" prop="loginName">
              </el-table-column>
              <el-table-column label="昵称" prop="showName"> </el-table-column>
              <el-table-column label="账号类型" prop="userTypeDictMap.name" />
              <el-table-column label="状态">
                <template slot-scope="scope">
                  <el-tag
                    :type="getUserStatusType(scope.row.userStatus)"
                    size="mini"
                    >{{ SysUserStatus.getValue(scope.row.userStatus) }}</el-tag
                  >
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                fixed="right"
                width="80"
              >
                <template slot-scope="{ row }">
                  <el-button
                    type="primary"
                    @click="
                      approverDialog = false;
                      handleChooseapprover(row);
                    "
                    size="mini"
                    >选择</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-row type="flex" justify="end" style="margin-top: 10px">
              <el-pagination
                background
                @size-change="handleSizeChangeGroup"
                @current-change="handleCurrentChangeGroup"
                :current-page="groupParams.pageNo"
                :page-size="groupParams.page_size"
                :page-sizes="[10, 20, 50, 100]"
                layout="total, prev, pager, next, sizes"
                :total="groupTotal"
              ></el-pagination>
            </el-row>
          </div>
          <div slot="footer" class="dialog-footer">
            <!-- <el-button @click="approverDialog = false" size="small">取 消</el-button>
            <el-button type="primary" @click="approverDialog = false" size="small">确 定</el-button> -->
          </div>
        </el-dialog>

        <el-form
          :model="detailData"
          size="mini"
          label-position="right"
          v-if="taskDialogType !== 'deliver'"
        >
          <el-row :gutter="20">
            <el-col :span="24" class="clue-title" style="display: block">
              商机基本信息
              <span style="font-size: 14px; color: #aaaaaa; margin-left: 10px"
                >商机编号 {{ detailData.oppoCode }}</span
              ></el-col
            >
            <el-col :span="12">
              <el-form-item label="企业名称：">{{
                detailData.custName
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业联系人：">
                <span>{{ detailData.contacts }}</span>
                <span style="margin-left: 10px">{{
                  detailData.telephone
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业务类型：">{{
                detailData.businessTypeName
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所在地区：">{{
                detailData.oppoDistrictName
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预计合同金额：">
                <!-- {{detailData.contractAmount}} {{detailData.units}} -->
                {{detailData.contractAmount ? detailData.contractAmount : 0}} {{detailData.units}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预计成交日期：">{{
                detailData.tradingDate
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商机来源：">{{
                detailData.oppoSource
              }}</el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="项目概况：">{{
                detailData.businessProfile
              }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 添加 -->
        <el-form
          :model="taskData"
          size="mini"
          label-position="right"
          label-width="120px"
          v-if="taskDialogType === 'add'"
          :rules="allRules"
          ref="taskForm"
        >
          <el-row :gutter="20">
            <el-col :span="24" class="clue-title">添加任务</el-col>
            <el-col :span="12">
              <el-form-item label="任务名称：" prop="taskName">
                <el-input
                  class="filter-item"
                  v-model="taskData.taskName"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务说明：" prop="taskDesc">
                <el-input
                  class="filter-item"
                  v-model="taskData.taskDesc"
                  placeholder="请输入任务说明/要求"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务执行人：" prop="executorList">
                <WorkflowSelect
                  v-model="taskData.executorList"
                  :oppoId="oppoId"
                  class="workflow-select"
                ></WorkflowSelect>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否需要审核：" prop="isAudit">
                <el-select v-model="taskData.isAudit" placeholder="请选择">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
              <el-col :span="24" v-if="taskData.isAudit == 1">
                <el-form-item label="审批流：">
                  <approver
                    :typeId="1"
                    :approverList="approver"
                    @handleChooseapprover="handleChooseapprover"
                  />
                </el-form-item>
              </el-col>
            <el-col :span="12">
              <el-form-item label="任务开始日期：" prop="beganDate">
                <el-date-picker
                  v-model="taskData.beganDate"
                  type="datetime"
                  align="right"
                  unlink-panels
                  placeholder="请选择"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务结束日期：" prop="endDate">
                <el-date-picker
                  v-model="taskData.endDate"
                  type="datetime"
                  align="right"
                  unlink-panels
                  placeholder="请选择"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注：">
                <el-input
                  type="textarea"
                  show-word-limit
                  :maxlength="150"
                  rows="4"
                  class="input-item"
                  v-model="taskData.remark"
                  placeholder="输入投标注意事项，支持150个字符"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 重新发起商机任务 -->
        <el-form
          :model="AgaintaskData"
          size="mini"
          label-position="right"
          label-width="120px"
          v-if="taskDialogType === 'amend'"
          :rules="allRules"
          ref="taskForm"
        >
          <el-row :gutter="20">
            <el-col :span="24" class="clue-title">添加任务</el-col>
            <el-col :span="12">
              <el-form-item label="任务名称：" prop="taskName">
                <el-input
                  class="filter-item"
                  v-model="AgaintaskData.taskName"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务说明：">
                <el-input
                  class="filter-item"
                  v-model="AgaintaskData.taskDesc"
                  placeholder="请输入任务说明/要求"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务执行人：" prop="executorList">
                <WorkflowSelect
                  v-model="AgaintaskData.executorList"
                  :oppoId="oppoId"
                  class="workflow-select"
                ></WorkflowSelect>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否需要审核：" prop="isAudit">
                <el-select v-model="AgaintaskData.isAudit" placeholder="请选择">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="审批流：">
                <approver
                  v-if="AgaintaskData.Againapprover"
                  :typeId="1"
                  :approverList="AgaintaskData.Againapprover"
                  @handleChooseapprover="handleChooseAgainapprover"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务开始日期：" prop="beganDate">
                <el-date-picker
                  v-model="AgaintaskData.beganDate"
                  type="datetime"
                  align="right"
                  unlink-panels
                  placeholder="请选择"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务结束日期：" prop="endDate">
                <el-date-picker
                  v-model="AgaintaskData.endDate"
                  type="datetime"
                  align="right"
                  unlink-panels
                  placeholder="请选择"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注：">
                <el-input
                  type="textarea"
                  show-word-limit
                  :maxlength="150"
                  rows="4"
                  class="input-item"
                  v-model="AgaintaskData.remark"
                  placeholder="输入投标注意事项，支持150个字符"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 详情,交付 -->
        <el-form
          :model="taskDetail"
          size="mini"
          label-position="right"
          label-width="110px"
          ref="taskDetail"
          :rules="allRules"
          v-if="taskDialogType == 'detail' || taskDialogType == 'deliver'"
        >
          <el-row :gutter="20">
            <el-col :span="24" class="clue-title">任务详情</el-col>
            <el-col :span="12">
              <el-form-item label="任务名称：">
                {{ taskDetail.taskName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务说明：">
                {{ taskDetail.taskDesc }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务执行人：">
                {{ taskDetail.executor }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否需要审核：">
                {{ taskDetail.isAudit == 0 ? "否" : "是" }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="审批流：">
                <approver
                  v-if="taskDetail.taskApproval"
                  :typeId="1"
                  :readonly="true"
                  :approverList="taskDetail.taskApproval"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务开始日期：">
                {{ taskDetail.beganDate }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务结束日期：">
                {{ taskDetail.endDate }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注：">{{
                taskDetail.remark
              }}</el-form-item>
            </el-col>
            <div v-if="ApprovalTaskItem == 2">
              <!-- <el-col :span="4">审批意见：</el-col> -->
              <el-col :span="24">
                <el-form-item label="审批意见" prop="taskinput">
                    <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="taskDetail.taskinput"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col
                :span="24"
                style="position: relative; left: 170px; top: 5px"
              >
                <el-form-item>
                  <el-button
                    size="medium"
                    type="primary"
                    @click="handleClickApprovalTask(1)"
                    >通过</el-button
                  >
                  <el-button
                    size="medium"
                    type="danger"
                    plain
                    @click="handleClickApprovalTask(2)"
                    >驳回</el-button
                  >
                </el-form-item>
              </el-col>
            </div>
            <div v-if="taskDialogType === 'deliver'">
              <el-col :span="12">
                <el-form-item label="实际开始日期：">
                  <el-date-picker
                    v-model="deliverData.actualStartDate"
                    type="datetime"
                    align="right"
                    unlink-panels
                    placeholder="请选择"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实际完成日期：">
                  <el-date-picker
                    v-model="deliverData.actualEndDate"
                    type="datetime"
                    align="right"
                    unlink-panels
                    placeholder="请选择"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="任务反馈成果：">
                  <el-input
                    class="filter-item"
                    v-model="deliverData.completionInstruction"
                    placeholder="请输入任务说明/要求"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="抄送：">
                  <el-select
                    v-model="deliverData.ccPeopleList"
                    multiple
                    filterable
                    remote
                    reserve-keyword
                    :remote-method="remoteMethod"
                    :loading="executorLoading"
                    style="display: block"
                    class="multiple-select"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in executorList"
                      :key="item.userId"
                      :label="item.showName"
                      :value="item.userId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="附件：">
                  <!-- <Upload v-model="deliverData.accessoryList"></Upload> -->
                  <!-- 成果交付附件上传 -->
                  <Upload v-model="deliverData.accessoryList" :limit="10" :id="oppoId" fielState="9"></Upload>
                </el-form-item>
              </el-col>
            </div>
          </el-row>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
          v-if="taskDialogType !== 'detail'"
        >
          <el-button @click="taskDialog = false">取 消</el-button>
          <el-button
            type="primary"
            @click="handleClickAddTask"
            v-if="taskDialogType === 'add'"
            >确 定</el-button
          >
          <el-button
            @click="handleClickAmendnTask"
            type="primary"
            v-if="taskDialogType === 'amend'"
            >确 定</el-button
          >
          <el-button
            type="primary"
            v-if="taskDialogType === 'deliver'"
            @click="handleClickDeliver"
            >提 交</el-button
          >
        </span>
      </el-dialog>
      <!-- 任务成果 -->
      <el-dialog
        title="任务成果"
        :visible.sync="taskResultDialog"
        width="800px"
      >
        <!-- 详情,交付 -->
        <el-form
          :model="taskData"
          size="mini"
          label-position="right"
          label-width="110px"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="任务名称：">
                {{ taskDetail.taskName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务说明：">
                {{ taskDetail.taskDesc }}
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="任务执行人：">
                {{ taskDetail.executor }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否需要审核：">
                {{ taskDetail.isAudit == 0 ? "否" : "是" }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审批流：">
                {{ taskDetail.beganDate }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务开始日期：">
                {{ taskDetail.beganDate }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务结束日期：">
                {{ taskDetail.endDate }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注：">{{
                taskDetail.remark
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="实际开始日期：">
                {{ taskDetail.actualStartDate }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="实际完成日期：">
                {{ taskDetail.actualEndDate }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务反馈成果：">
                {{ taskDetail.completionInstruction }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="抄送：">
                {{ taskDetail.ccPeople }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="附件：">
                <Upload v-model="taskDetail.accessoryList" fielState="9" :id="taskDetail.id" readonly></Upload>
                <!-- <div class="enclosure">
                  <el-tooltip
                    effect="dark"
                    :content="item.name"
                    placement="top"
                    v-for="item in deliverData.accessoryList"
                    :key="item.uid"
                  >
                    <div class="enclosure-item">
                      <img
                        src="@/assets/img/word.webp"
                        v-if="item.name.indexOf('.doc') > -1"
                        alt=""
                        @click="handleClickEnclosure(item.response.data)"
                      />
                      <img
                        src="@/assets/img/excel.webp"
                        v-else-if="item.name.indexOf('.xls') > -1"
                        alt=""
                        @click="handleClickEnclosure(item.response.data)"
                      />
                      <img
                        src="@/assets/img/pdf.webp"
                        v-else-if="item.name.indexOf('.pdf') > -1"
                        alt=""
                        @click="handleClickEnclosure(item.response.data)"
                      />
                      <el-image
                        v-else
                        style="
                          width: 50px;
                          height: 50px;
                          margin: 0 auto;
                          display: block;
                        "
                        :src="item.response.data"
                        fit="cover"
                        :preview-src-list="[item.response.data]"
                      ></el-image>
                      <div class="enclosure-name">{{ item.name }}</div>
                    </div>
                  </el-tooltip>
                </div> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
      <!-- 商机审批 -->
      <el-dialog
        title=""
        :visible.sync="approvalDialog"
        width="800px"
        @close="
          approvalDialogType = 'add';
          approvalDetail = '';
        "
      >
        <!-- 审批状态 -->
        <template>
          <div
            v-if="approvalDetail.examinationApprovalOpinions == 2"
            class="approved"
          >
            <img src="../../assets/img/Approved.png" alt="" />
          </div>
          <div
            v-if="approvalDetail.examinationApprovalOpinions == 3"
            class="approved"
          >
            <img src="../../assets/img/notApproved.jpg" alt="" />
          </div>
        </template>
        <!-- 重新发起商机审批 -->
        <el-form
          :model="AgainApprovalData"
          size="mini"
          label-position="right"
          label-width="110px"
          v-if="approvalDialogType === 'Again'"
          :rules="allRules"
          ref="AgainApprovalForm"
        >
          <el-row :gutter="20">
            <el-col :span="24" class="clue-title">审批信息填写</el-col>
            <el-col :span="24">
              <el-form-item label="审批类型：" prop="examinationApprovalType">
                <el-radio-group
                  v-model="AgainApprovalData.examinationApprovalType"
                >
                  <el-radio :label="1">费用审批</el-radio>
                  <el-radio :label="2">盖章审批</el-radio>
                  <el-radio :label="3">用车审批</el-radio>
                  <el-radio :label="4">投标审批</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="招标方式：" prop="tenderMethod">
                <el-radio-group v-model="AgainApprovalData.tenderMethod">
                  <el-radio :label="1">公开招标</el-radio>
                  <el-radio :label="2">邀标</el-radio>
                  <el-radio :label="3">议标</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报名平台：">
                <el-input
                  class="filter-item"
                  v-model="AgainApprovalData.applicationPlatform"
                  placeholder="请输入报名平台"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报名日期：" prop="registrationDeadline">
                <el-date-picker
                  v-model="AgainApprovalData.registrationDeadline"
                  type="datetime"
                  align="right"
                  unlink-panels
                  placeholder="请选择"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开标日期：" prop="bidOpenDate">
                <el-date-picker
                  v-model="AgainApprovalData.bidOpenDate"
                  type="datetime"
                  align="right"
                  unlink-panels
                  placeholder="请选择"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="是否为合作投标项目："
                label-width="180px"
                prop="isBid"
              >
                <el-radio-group v-model="AgainApprovalData.isBid">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="AgainApprovalData.isBid === '1'">
              <el-form-item label="合作方：">
                <el-input
                  class="filter-item"
                  v-model="AgainApprovalData.partner"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="是否需要收费："
                label-width="140px"
                prop="isCharge"
              >
                <el-radio-group v-model="AgainApprovalData.isCharge">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="AgainApprovalData.isCharge === '1'">
              <el-form-item label="金额：">
                <el-input
                  class="filter-item"
                  v-model="AgainApprovalData.amount"
                  placeholder="请输入"
                  oninput="value=value.replace(/[^\d]/g,'')"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注：">
                <el-input
                  class="filter-item"
                  v-model="AgainApprovalData.note"
                  placeholder="请输入"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="审批流：">
                <approver
                  v-if="OpportunitiesApprover"
                  :typeId="2"
                  :approverList="OpportunitiesApprover"
                  @handleChooseapprover="handleChooseOpportunitiesApprover"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="抄送：">
                <approver
                  v-if="CCApprover"
                  :typeId="2"
                  :isCc="true"
                  :approverList="CCApprover"
                  @handleChooseapprover="handleChooseCCApprover"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 详情 -->
        <el-form
          :model="approvalDetail"
          size="mini"
          label-position="right"
          label-width="110px"
          v-if="approvalDialogType == 'detail'"
        >
          <el-row :gutter="20">
            <el-col :span="24" class="clue-title">审批详情</el-col>
            <el-col :span="12">
              <el-form-item label="审批类型：">
                {{ approvalDetail.examinationApprovalTypeName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="招标方式：">
                {{ approvalDetail.tenderMethodName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报名平台：">
                {{ approvalDetail.applicationPlatform }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报名日期：">
                {{ approvalDetail.registrationDeadline }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开标日期：">
                {{ approvalDetail.bidOpenDate }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否为合作投标项目：" label-width="180px">
                {{ approvalDetail.isBidName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否需要收费：">
                {{ approvalDetail.isChargeName }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="审批流：">
                <approver
                  v-if="approvalDetail.approvalApprovaer"
                  :typeId="2"
                  :readonly="true"
                  :approverList="approvalDetail.approvalApprovaer"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="抄送：">
                <approver
                  v-if="approvalDetail.ccpeopleVos"
                  :typeId="2"
                  :isCc="true"
                  :readonly="true"
                  :approverList="approvalDetail.ccpeopleVos"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注：">{{
                approvalDetail.note
              }}</el-form-item>
            </el-col>
            <div v-if="approve == 2">
              <el-col :span="4">审批意见：</el-col>
              <el-col :span="20">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="approvaltextarea"
                >
                </el-input>
              </el-col>
              <el-col
                :span="24"
                style="position: relative; left: 170px; top: 5px"
              >
                <el-form-item>
                  <el-button
                    type="primary"
                    size="medium"
                    @click="
                      approvalDialog = false;
                      handleClickThroughApproval(1);
                    "
                    >通过</el-button
                  >
                  <el-button
                    type="danger"
                    size="medium"
                    @click="
                      approvalDialog = false;
                      handleClickThroughApproval(2);
                    "
                    plain
                    >驳回</el-button
                  >
                </el-form-item>
              </el-col>
            </div>
          </el-row>
        </el-form>
        <!-- <span
          slot="footer"
          class="dialog-footer"
          v-if="approvalDialogType === 'add'"
        >

        </span> -->
        <span
          slot="footer"
          class="dialog-footer"
          v-if="approvalDialogType === 'Again'"
        >
          <el-button @click="approvalDialog = false">取 消</el-button>
          <el-button type="primary" @click="handleClickAmendApproval"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { opportunitiesExaminationApprovalTypeArr } from '@/staticDict/static.js';
import { BusinessOpportunities, Cluemanagement } from '@/api/commercial.js';
import { SystemController } from '@/api';
// import { TestFlowableController } from '@/api';
import projectConfig from '@/core/config';
import { getToken, getType } from '@/utils';
// import { fileUploadFileDo } from '@/api/projectAdministration.js';
import WorkflowSelect from '@/views/Commercial/components/WorkflowSelect.vue';
import approver from '../Projects/components/approver';
import approvalDialog from '@/views/Commercial/opportunitiesApproval/approvalDialog.vue';

export default {
  name: 'Clueadd',
  filters: {
    // 是否为本人
    isOneselfFilter (userId) {
      return this.getUserInfo.userId === userId;
    },
    approverFilter (val) {
      const data = {
        0: '一',
        1: '二',
        2: '三',
        3: '四',
        4: '五',
        5: '六',
        6: '七',
        7: '八',
        8: '九',
        9: '十',
        10: '十一',
        11: '十二',
        12: '十三',
        13: '十四',
        14: '十五',
        15: '十六',
        16: '十七',
        17: '十八',
        18: '十九',
        19: '二十',
        20: '二十一',
        21: '二十二',
        22: '二十三',
        23: '二十四',
        24: '二十五',
        25: '二十六',
        26: '二十七',
        27: '二十八',
        28: '二十九',
        29: '三十'
      };
      return data[val];
    },
    statusFilter (val) {
      const data = {
        1: '执行中',
        2: '任务交付中',
        3: '已完成',
        4: '任务驳回'
      };
      return data[val];
    },
    approvalTypeFilter (val) {
      let obj = opportunitiesExaminationApprovalTypeArr.find(v => v.value === val);
      return obj.label;
    },
    tenderMethodFilter (val) {
      const data = {
        1: '公开邀标',
        2: '邀标',
        3: '议标"'
      };
      return data[val];
    },
    isFilter (val) {
      const data = {
        0: '否',
        1: '是'
      };
      return data[val];
    }
  },
  components: {
    WorkflowSelect,
    approver
  },
  data () {
    return {
      // 商机审批审批意见
      approvaltextarea: '',
      // 商机任务审批意见
      taskDetail: {
        taskinput: ''
      },
      token: getToken(),
      loading: false,
      isShowloading: false,
      executorLoading: false,
      detailData: {
        parentName: []
      },
      img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      oppoId: this.$route.query.oppoId,
      dynamicValue: '',
      queryParams: {
        current: 1,
        size: 10,
        oppoId: this.$route.query.oppoId
      },
      cluequeryParams: {
        current: 1,
        size: 10
      },
      businessType: [],
      dynamicTotal: 0,
      dynamicList: [],
      clueDynamicList: [],
      clueDynamicTotal: 0,
      // 投标
      bidDialog: false,
      bidData: {},
      // 小组人员
      groupDialog: false,
      groupData: [],
      groupList: [],
      groupTotal: 0,
      groupParams: {
        loginName: '',
        page_size: 10,
        pageNo: 1
      },
      // 商机任务
      taskDialog: false,
      // 选择审批对话框
      approverDialog: false,
      CCDialog: false,
      approveDialog: false,
      taskResultDialog: false,
      taskDialogType: 'add',
      taskData: {},
      AgaintaskData: {
        Againapprover: []
      },
      executorList: [], //   执行人list
      // taskDetail: {},
      taskList: [],
      deliverData: {},
      // 商机审批
      approvalDialog: false,
      // 商机审批意见
      approvalOpinionsDialog: false,
      TaskOpinionDialog: false,
      approvalData: {},
      AgainApprovalData: {},
      approvalList: [],
      approver: [],
      ApprovalTaskItem: '',
      // 商机审批人选择
      OpportunitiesApprover: [],
      // 抄送人选择
      CCApprover: [],
      approvalDetail: {},
      approvalDialogType: 'add',
      // 附件
      action: projectConfig.baseUrl + 'admin/knowledge/fileUpload',
      fileLists: [],
      acceptStr:
        '.doc,.docx,.xls,.xlsx,.jpg,.png,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      clueDetail: { parentName: [] },
      // form表单验证规则
      allRules: {
        bidType: [
          { required: true, message: '请选择投标方式', trigger: 'change' }
        ],
        taskName: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        // 任务执行人
        executorList: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        isAudit: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        beganDate: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        endDate: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        tenderMethod: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        examinationApprovalType: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        registrationDeadline: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        bidOpenDate: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        isBid: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        isCharge: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        taskDesc: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        taskinput: [
          {required: true, message: '审批意见不能为空', trigger: 'blur'}
        ]
      }
    };
  },
  computed: {
    // 是否显示商机任务-审核按钮
    showApprovalBtn () {
      return (taskStatus, arr) => {
        // 交付中才能审核
        if (!getType(arr).isArray || !arr.length || taskStatus !== 2) {
          return false;
        }
        let flag = false;
        arr.some((v, i, arr) => {
          if (v.state === 0) {
            // 与当前登录用户一致，并且上一个不是驳回状态
            if (i === 0) {
              flag = this.getUserInfo.userId === v.userId;
            } else {
              flag = this.getUserInfo.userId === v.userId && arr[i - 1].state !== 2;
            }
            return true;
          }
        });
        return flag;
      }
    }
  },
  mounted () {
    this.loadOpportunitiesDetail();
    // 任务列表
    this.getTaskList();
    // 审批列表
    this.getApprovalList();
    // 商机动态列表
    this.getList();
  },
  methods: {
    // 商机审批添加
    addOpportunitiesApproval () {
      this.$dialog.show('添加商机审批', approvalDialog, {
        area: ['900px', '90vh']
      }, {
        detailData: this.detailData,
        callback: async (params, cb) => {
          params = {
            ...params,
            oppoId: this.detailData.id
          }
          await BusinessOpportunities.addApproval(this, params);
          cb();
        }
      }).then((isDetermine) => {
        if (!isDetermine) {
          return false;
        }
        this.$message({
          message: '添加成功',
          type: 'success'
        });
        this.getApprovalList();
      }).catch(e => { });
    },
    // 商机审批重新添加
    againAddOpportunitiesApproval (row) {
      this.$dialog.show('重新提交商机审批', approvalDialog, {
        area: ['900px', '90vh']
      }, {
        detailData: this.detailData,
        approvalDetail: row,
        isAgain: true,
        callback: async (params, cb) => {
          params = {
            ...params,
            oppoId: this.detailData.id
          }
          await BusinessOpportunities.AmendApprove(this, params);
          cb();
        }
      }).then((isDetermine) => {
        if (!isDetermine) {
          return false;
        }
        this.$message({
          message: '重新提交成功',
          type: 'success'
        });
        this.getApprovalList();
      }).catch(e => { });
    },
    // 商机审批的审核按钮 isAudit true: 审批;
    handleClickApprovalDetail (row) {
      this.$dialog.show('商机审批审核', approvalDialog, {
        area: ['900px', '90vh']
      }, {
        detailData: this.detailData,
        approvalDetail: row,
        readonly: true,
        isAudit: true,
        callback: async (params, cb) => {
          params = {
            ...params,
            appId: row.id
          }
          await BusinessOpportunities.approvebusinessOpportunities(this, params);
          cb();
        }
      }).then((isDetermine) => {
        if (!isDetermine) {
          return false;
        }
        this.$message({
          message: '审批完成',
          type: 'success'
        });
        this.getApprovalList();
        this.getList();
      }).catch(e => { });
    },
    // 商机审批的查看详情
    handleClickDetail (row) {
      this.$dialog.show('商机审批详情', approvalDialog, {
        area: ['900px', '90vh']
      }, {
        detailData: this.detailData,
        approvalDetail: row,
        readonly: true
      }).then(() => { }).catch(e => { });
    },
    // 下载附件
    handleClickEnclosure (url) {
      window.location.href = url;
    },
    // 锚点
    handleClickAnchor (name) {
      this.$refs[name].scrollIntoView({ behavior: 'smooth' });
    },
    /**
     * 商机审批
     */

    // 管理商机任务详情form表单验证
    // approveclose () {
    //   this.$refs.AgainApprovalForm.clearValidate()
    //   this.$refs.approvalForm.clearValidate()
    // },
    // 重新发起商机审批
    handleClickAgainApproval (row) {
      this.approvalDialog = true
      this.AgainApprovalData = { ...row }
      this.approvalDialogType = 'Again';
    },
    // 修改商机审批
    handleClickAmendApproval () {
      this.$refs['AgainApprovalForm'].validate((valid) => {
        if (valid) {
          this.AgainApprovalData.examinationApprovalTypeName = this.$options.filters[
            'approvalTypeFilter'
          ](this.AgainApprovalData.examinationApprovalType);
          this.AgainApprovalData.tenderMethodName = this.$options.filters[
            'tenderMethodFilter'
          ](this.AgainApprovalData.tenderMethod);
          BusinessOpportunities.AmendApprove(this, {
            ...this.AgainApprovalData,
            oppoId: this.oppoId,
            approvalApprovaer: this.OpportunitiesApprover
            // ccPeopleList: this.CCApprover
          }).then((res) => {
            this.getApprovalList();
            this.$message({
              message: '重新发起成功',
              type: 'success'
            });
            this.approvalDialog = false;
          });
        }
      });
    },
    // 删除商机审批
    handleClickDelApprovalDetail (row) {
      BusinessOpportunities.delApproval(this, row.id).then((res) => {
        this.getApprovalList();
      });
    },
    // 查看商机审批意见
    handleClickViewApprovalOpinion (row) {
      // this.approvalOpinionsDialog = true
      this.$dialog.show('审核意见', approver, {
        area: ['600px', '50vh']
      }, {
        approverList: row.approvalApprovaer,
        readonly: true
      })
        .then(() => { })
        .catch(() => { });
    },
    // 审批列表
    getApprovalList () {
      BusinessOpportunities.listApproval(this, this.oppoId).then((res) => {
        this.approvalList = res.data;
      });
    },
    // 审批商机
    handleClickThroughApproval (state) {
      BusinessOpportunities.approvebusinessOpportunities(this, {
        appId: this.approvalDetail.id,
        approvalOpinion: this.approvaltextarea,
        state: state
      }).then((res) => {
        this.getApprovalList();
        this.getList();
        this.$message({
          message: '审批完成',
          type: 'success'
        });
      })
    },
    /**
     * 商机任务
     */
    // 添加任务
    handleClickAddTask () {
      // taskForm
      this.$refs['taskForm'].validate((valid) => {
        if (valid) {
          BusinessOpportunities.addTask(this, {
            ...this.taskData,
            taskApproval: this.approver,
            // userId: this.loginName,
            opportunityId: this.oppoId
          }).then((res) => {
            if (res.success) {
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              this.taskDialog = false;
              this.getTaskList();
            }
          });
        }
      });
    },
    // 删除商机任务
    handleClickDelBusinessMission (row) {
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        BusinessOpportunities.delTask(this, row.id).then((res) => {
          this.$message.success('删除成功');
          this.getTaskList();
        });
      }).catch(() => { })
    },
    // 重新发起商机任务
    handleClickAgainTask (row) {
      this.AgaintaskData = { ...row }
      this.AgaintaskData.Againapprover = row.taskApproval
      this.taskDialogType = 'amend';
      this.taskDialog = true;
    },
    // 修改商机任务
    handleClickAmendnTask () {
      this.$refs['taskForm'].validate((valid) => {
        if (valid) {
          BusinessOpportunities.AmendTask(this, {
            ...this.AgaintaskData,
            taskApproval: this.AgaintaskData.Againapprover,
            // userId: this.loginName,
            taskId: this.detailData.id,
            executor: this.executorList.id
          }).then((res) => {
            if (res.success) {
              this.$message({
                message: '重新发起成功',
                type: 'success'
              });
              this.taskDialog = false;
              this.getTaskList();
            }
          });
        }
      });
    },
    // 查看商机任务审批意见
    handleClickViewTaskOpinion (row) {
      // this.TaskOpinionDialog = true;
      this.$dialog.show('审核意见', approver, {
        area: ['600px', '50vh']
      }, {
        approverList: row.taskApproval,
        readonly: true
      })
        .then(() => { })
        .catch(() => { });
    },
    // 商机任务审批
    handleClickApprovalTask (state) {
    // this.allRules.taskinput[0].required = state === 2
      this.$refs['taskDetail'].validate((valid) => {
        if (valid) {
          BusinessOpportunities.approvalTask(this, {
            state: state,
            taskId: this.taskDetail.id,
            approvalOpinion: this.taskDetail.taskinput
          }).then((res) => {
            this.ApprovalTaskItem = '';
            this.taskDetail.taskinput = '';
            this.getTaskList();
            this.getList();
            this.taskDialog = false
            this.$message({
              message: '审批完成',
              type: 'success'
            });
          })
        } else {
          return false;
        }
      })
    },
    // 成果交付
    handleClickDeliver () {
      BusinessOpportunities.deliverTask(this, {
        ...this.deliverData,
        id: this.taskDetail.id
      }).then((res) => {
        this.$message({
          message: '提交成功',
          type: 'success'
        });
        this.taskDialog = false;
        this.getTaskList();
      });
    },
    getTaskList () {
      BusinessOpportunities.listTask(this, this.oppoId).then((res) => {
        this.taskList = res.data;
      });
    },
    // 任务执行人搜索
    remoteMethod (query) {
      this.executorLoading = true;
      SystemController.getUserList(this, {
        orderParam: [{ asc: false, fieldName: 'showName' }],
        pageParam: {
          pageNum: 1,
          pageSize: 30
        },
        sysUserDtoFilter: { showName: query }
      })
        .then((res) => {
          this.executorList = res.data.dataList;
          this.executorLoading = false;
        })
        .catch((e) => {
          this.executorLoading = false;
        });
    },
    // 成果交付
    handleClickTaskItem (row, type) {
      this.taskDetail = row;
      this.taskDialogType = type;
      this.taskDialog = true;
      this.remoteMethod()
    },
    // 商机任务审批页面
    handleClickApprovalTaskItem (row, type) {
      this.taskDetail = row;
      this.taskDialogType = 'detail';
      this.taskDialog = true;
      this.ApprovalTaskItem = type
    },
    handleClickTaskResult (row) {
      this.taskDetail = row;
      let accessory = this.taskDetail?.accessory;
      this.taskDetail.accessoryList = getType(accessory).isString ? JSON.parse(accessory) : accessory;
      this.taskResultDialog = true;
    },
    handleClickAddBtn () {
      this.taskDialogType = 'add';
      this.taskDialog = true;
    },
    /**
     * 商机小组
     */
    handleClickAddGroup () {
      this.getUserList();
      this.groupDialog = true;
    },
    getGroupList () {
      BusinessOpportunities.listTeam(this, this.oppoId).then((res) => {
        this.groupData = res.data;
      });
    },
    handleChooseGroup (row) {
      if (!row.projectRoles) {
        this.$message({
          message: '请选择项目角色',
          type: 'warning'
        });
        return;
      }
      BusinessOpportunities.addTeam(this, {
        oppoId: this.oppoId,
        name: row.loginName,
        jobs: row.deptIdDictMap.name,
        projectRoles: row.projectRoles,
        contact: row.mobile,
        userId: row.userId
      }).then((res) => {
        this.getGroupList();
        this.groupDialog = false;
      });
    },
    handleDeleteGroup (row) {
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        BusinessOpportunities.deleteTeam(this, {
          tId: row.tId,
          userId: row.userId,
          oppoId: this.oppoId
        }).then((res) => {
          this.getGroupList();
          this.$message.success('删除成功');
        });
      }).catch(() => { })
    },
    // 审批人选择
    handleChooseapprover (data) {
      this.approver = data;
    },
    // 审批人选择
    handleChooseAgainapprover (data) {
      this.AgaintaskData.Againapprover = data;
    },
    // 商机审批人选择
    handleChooseOpportunitiesApprover (data) {
      this.OpportunitiesApprover = data;
    },
    // 审批人删除
    handleDelOpportunitiesApprover (index) {
      this.OpportunitiesApprover.splice(index, 1)
    },
    // 抄送人选择
    handleChooseCCApprover (data) {
      data = data.map(v => v.userId);
      this.CCApprover = data;
    },
    // 抄送人删除
    handleDelCCApprover (index) {
      this.CCApprover.splice(index, 1)
    },
    // 分页
    handleSizeChangeGroup (val) {
      this.groupParams.page_size = val;
      this.getUserList();
    },
    handleCurrentChangeGroup (val) {
      this.groupParams.pageNo = val;
      this.getUserList();
    },
    getUserList (type) {
      if (type) {
        this.groupParams.pageNo = 1;
      }
      SystemController.getUserList(this, {
        orderParam: [{ asc: false, fieldName: 'showName' }],
        pageParam: {
          pageNum: this.groupParams.pageNo,
          pageSize: this.groupParams.page_size
        },
        sysUserDtoFilter: { showName: this.groupParams.showName }
      })
        .then((res) => {
          this.groupList = res.data.dataList;
          this.groupTotal = res.data.totalCount;
        })
        .catch((e) => { });
    },
    // 商机投标信息
    handleClickAddBid () {
      this.$refs['bidForm'].validate((valid) => {
        if (valid) {
          BusinessOpportunities.addBid(this, {
            ...this.bidData,
            oppoId: this.detailData.id
          }).then((res) => {
            if (res.success) {
              this.$set(this.bidData, 'show', true);
              this.getBidData()
              this.bidDialog = false;
            }
          });
        }
      });
    },
    handleCloseBid () { },
    /**
     * 商机详情
     */
    loadOpportunitiesDetail () {
      let params = this.oppoId;
      return new Promise((resolve, reject) => {
        BusinessOpportunities.detail(this, params)
          .then((res) => {
            this.businessType = res.data.businessType.split(',');
            res.data.oppoDistrictCode = Number(res.data.oppoDistrictCode);
            this.detailData = res.data;
            this.getBidData();
            this.getGroupList();
            if (res.data.clueId) {
              this.getClueDynamicList();
              this.loadCluedetail();
            }
          })
          .catch((e) => {
            reject(e);
          });
      });
    },
    // 获取投标信息
    getBidData () {
      BusinessOpportunities.getBid(this, this.oppoId).then((res) => {
        if (res.data && res.data.length > 0) {
          this.bidData = res.data[0];
          this.$set(this.bidData, 'show', true);
          let accessory = this.bidData?.accessory;
          this.bidData.accessoryList = getType(accessory).isString ? JSON.parse(accessory) : accessory;
        }
      });
    },
    // 发布动态
    handleClickRelease () {
      BusinessOpportunities.addDynamic(this, {
        oppoId: this.oppoId,
        dynamicContent: this.dynamicValue.trim()
      }).then((res) => {
        this.dynamicValue = '';
        this.$message({
          message: '已发布',
          type: 'success'
        });
        this.getList();
      });
    },
    // 动态列表
    getList () {
      this.loading = true;
      BusinessOpportunities.listDynamic(this, this.queryParams)
        .then((res) => {
          this.dynamicList = res.data.records;
          this.dynamicTotal = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleCurrentChange (val) {
      this.queryParams.current = val;
      this.getList();
    },
    handleSizeChange (val) {
      this.queryParams.size = val;
      this.getList();
    },
    handleClickDelete (id) {
      this.$confirm('是否删除此条动态', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          BusinessOpportunities.deleteDynamic(this, id).then((res) => {
            this.getList();
          });
        })
        .catch(() => { });
    },
    getUserStatusType (status) {
      if (status === this.SysUserStatus.NORMAL) {
        return 'success';
      } else if (status === this.SysUserStatus.LOCKED) {
        return 'danger';
      } else {
        return 'info';
      }
    },
    handleSizeChangeClue (val) {
      this.cluequeryParams.size = val;
      this.getClueDynamicList();
    },
    handleCurrentChangeClue (val) {
      this.cluequeryParams.current = val;
      this.getClueDynamicList();
    },
    getClueDynamicList () {
      Cluemanagement.dynamicList(this, {
        ...this.cluequeryParams,
        clueId: this.detailData.clueId
      }).then((res) => {
        this.clueDynamicList = res.data.records;
        this.clueDynamicTotal = res.data.total;
      });
    },
    loadCluedetail () {
      let params = this.detailData.clueId;
      return new Promise((resolve, reject) => {
        Cluemanagement.detail(this, params)
          .then((res) => {
            this.clueDetail = res.data;
          })
          .catch((e) => {
            reject(e);
          });
      });
    },
    /**
     * 上传文件-成功
     */
    handleSuccess (file, fileList) {
      this.fileLists = fileList;
    },
    /**
     * 上传文件-删除
     */
    handleRemove (file, fileList) {
      this.fileLists = fileList;
    },
    /**
     * 上传图片限制条件
     */
    beforeAvatarUpload (file, fileList) {
      // const isJPG = file.type === 'image/jpeg'
      // const isLt200K = file.size / 1024 <script 200
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      //   return false
      // }
      // if (!isLt200K) {
      //   this.$message.error('上传头像图片大小不能超过 200KB!')
      //   return false
      // }
      // return isJPG && isLt200K
    }
  }
};
</script>
<style lang="scss" scoped>
.clueDetail {
  position: relative;
  padding: 20px;
  .clue-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    margin-bottom: 10px;
  }
  .del-disabled{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    color: #FFFFFF;
    background-color: #fab6b6;
    border-color: #fab6b6;
    cursor: not-allowed;
    background-image: none;
    padding: 8px 16px;
    font-size: 12px;
    border-radius: 3px;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
  }
  .clue-form {
    .clue-title {
      font-size: 16px;
    }
  }
  .line {
    width: 100%;
    height: 2px;
    background: rgba(242, 242, 242, 1);
    margin-bottom: 15px;
  }
  .dynamic {
    padding: 20px;
    border-radius: 8px;
    background: rgba(242, 242, 242, 0.3);
    .dynamic-item {
      display: flex;
      align-items: center;
      margin-bottom: 30px;
      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 40%;
        margin: 0 auto;
        display: block;
        margin-bottom: 6px;
      }
      .dynamic-content {
        min-height: 40px;
        margin-bottom: 6px;
      }
      .dynamic-time {
        color: #d7d7d7;
      }
    }
    .dynamic-release {
      margin-top: 50px;
    }
    .release-btn {
      margin-top: 20px;
      text-align: right;
    }
  }
}
.el-date-editor,
.workflow-select,
.el-select {
  width: 250px;
}
.group-dialog .el-select {
  width: auto;
}
.anchor {
  position: absolute;
  right: 15px;
  top: 70px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 10;
  .anchor-item {
    padding: 8px 15px;
    background-color: #fff;
    // border-bottom: 1px solid #d7d7d7;
    cursor: pointer;
    &:last-child {
      border: none;
    }
    &:hover{
      background: #d7d7d7;
    }
  }
}
.OpportunitiesDetail {
  padding: 0 !important;
}
.enclosure {
  display: flex;
  flex-wrap: wrap;
  .enclosure-item {
    flex-shrink: 0;
    width: 80px;
    margin-right: 20px;
    margin-bottom: 15px;
    img {
      width: 50px;
      height: 50px;
      object-fit: cover;
      margin: 0 auto;
      display: block;
    }
    .enclosure-name {
      width: 100%;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.approved {
  width: 256px;
  height: 256px;
  position: absolute;
  right: 0;
  top: -30px;
}
/deep/.el-dialog__headerbtn {
  z-index: 10;
}
</style>
<style>
.multiple-select .el-select__tags {
  overflow-x: auto;
  flex-wrap: nowrap;
}
.multiple-select .el-select__input {
  min-width: 20px;
}
.OpportunitiesDetail .el-form-item__label {
  font-weight: bold;
}
</style>
<style>
.approver-select {
  font-size: 20px;
  position: relative;
  bottom: 30px;
}

/* .approver{
  width:700px;
  height: 20px;
  background-color: red;
} */
div.el-col.el-col-4 {
  font-size: 20px;
}
div.el-col.el-col-20 {
  position: relative;
  right: 35px;
  margin-bottom: 20px;
}
</style>
